<template>
    <qf-table :columns="columns" :tableData="tableData" :tableLoading="tableLoading">
        <!-- 图片 -->
        <template v-slot:orderDetail[0].imageUrl="{ row }">
            <img :src="row.orderDetail[0].imageUrl" height="30" alt="">
        </template>
        <!-- 按钮 -->
        <template v-slot:action="{ row }">
            <el-button type="primary" :disabled="row.order_status == 4 || row.pay_status == 1"
                @click="pay(row)">支付</el-button>
            <el-button type="danger" @click="delClick(row)">删除</el-button>
        </template>
        <!-- 支付状态 -->
        <template v-slot:pay_status="{ row }">
            {{ row.pay_status == 0 ? "已支付" : "未支付" }}
        </template>
        <!-- 订单状态 -->
        <template v-slot:order_status="{ row }">
            {{ orderStatus(row) }}
        </template>
    </qf-table>
</template>

<script setup>
import * as api from "@/api/vip.js"
import qfTable from "@/components/qfTable/index.vue"
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router"
import { ElMessageBox, ElMessage } from "element-plus";
let router = useRouter()

// 定义表格数据
let columns = ref([
    {
        label: "产品图片",
        prop: "orderDetail[0].imageUrl"
    },
    {
        label: "订单编号",
        prop: "order_id"
    },
    {
        label: "产品名称",
        prop: "orderDetail[0].productName"
    },
    {
        label: "数量",
        prop: "orderDetail[0].quantity",
        width: "60px"
    },
    {
        label: "总价",
        prop: "total_fee"
    },
    {
        label: "创建时间",
        prop: "create_time",
        width: "200px"
    },
    {
        label: "支付状态",
        prop: "pay_status"
    },
    {
        label: "订单状态",
        prop: "order_status"
    },
    {
        label: "操作",
        prop: "action"
    }
])
// 表格数据
let tableData = ref()

// 声明loading
let tableLoading = ref(false)

// 封装获取方法
let getList = async () => {
    tableLoading = true
    try {
        let res = await api.getOrderApi()
        console.log(res.data.data);
        tableData.value = res.data.data
        tableLoading = false
    } catch (e) {
        console.log(e);
        tableLoading = false
    }
}

// 订单状态
// 订单状态:0未提交 1提交成功 2已经取消 3无效订单 4.交易关闭 5退货
let orderStatus = (row) => {
    switch (row.order_status) {
        case 0:
            return "未提交"
        case 1:
            return "提交成功"
        case 2:
            return "已经取消"
        case 3:
            return "无效订单"
        case 4:
            return "交易关闭"
        case 5:
            return "退货"

    }
}


// 去支付
let pay = (row) => {
    // console.log(row.order_id);
    router.push("/pay/payMent?order_id=" + row.order_id)
}

// 删除订单
let delClick = (row) => {
    console.log(row);
    ElMessageBox.confirm("是否删除这条订单？", '提示', {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
    })
        .then(async () => {
            // 发起删除请求
            try {
                let res = await api.delOrderApi(row.order_id)
                ElMessage({
                    type: "success",
                    message: "删除成功"
                })
            } catch (e) {
                console.log(e);
                ElMessage({
                    type:"error",
                    message: e.toSting()
                })
            }
            // 更新列表
            getList()
        })
        .catch(() => {
            // 取消删除
            ElMessage({
                type: "warning",
                message: "已取消删除"
            })
        })
}

onMounted(() => {
    getList()
})
</script>
<script>
export default {
    meta: { title: 'order', name: '订单管理', routeName: "order", icon: "#icon-dd" }
}
</script>